<!DOCTYPE html>
<html lang="zh-CN" xmlns:layOut="http://www.w3.org/1999/xhtml" layOut:decorator="layOut/layOut">
<head>
    <title>菜单管理</title>
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label" for="name">菜单名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="name" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="theSearchFilter">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="theTable" lay-filter="tableFilter"></table>
        </div>
    </div>
    <script type="text/html" id="innerToolbar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="addEvent">
            <i class="layui-icon layui-icon-add-1"></i>
        </button>
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="editEvent">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="batchRemoveEvent">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
    </script>

    <script type="text/javascript">
        layui.use(['table', 'form', 'jquery','common','treetable'], function() {
            let $ = layui.jquery;
            let table = layui.table;
            let form = layui.form;
            let common = layui.common;
            let treetable = layui.treetable;

            const param = {
                treeColIndex: 0,
                treeSpid: '0',
                treeIdName: 'powerId',
                treePidName: 'parentId',
                treeDefaultClose: true,
                elem: '#theTable',
                url: '/menu/getTreeTableList',
                method: 'post',
                page: false,
                skin: 'line',
                cols: [
                    [
                        {field: 'powerName', title: '权限名称', align: 'center', minWidth: 200},
                        {field: 'icon', title: '图标', align: 'center', templet: '#icon'},
                        {field: 'powerType', title: '权限类型', align: 'center', templet: '#power-type'},
                        {field: 'enable', title: '是否可用', align: 'center', templet: '#power-enable'},
                        {field: 'sort', title: '排序', align: 'center'},
                        {title: '操作', align: 'center', templet: '#innerToolbar', width: 150}
                    ]
                ]
            };

            treetable.render(param);
            //搜索
            form.on('submit(theSearchFilter)', function(data) {
                treetable.render(param);
                // treetable.reload('theTable', {
                //     where: data.field
                // })
                return false;
            });
            //表格中工具栏
            table.on('tool(tableFilter)', function(obj) {
                if (obj.event === 'addEvent') {
                    layer.open({
                        type: 2,
                        title: '新增',
                        shade: 0.1,
                        area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '400px'],
                        content: '/menu/add/' + obj.data.id
                    });
                } else if (obj.event === 'editEvent') {
                    layer.open({
                        type: 2,
                        title: '修改',
                        shade: 0.1,
                        area: ['500px', '400px'],
                        content: '/menu/edit/' + obj.data.id
                    });
                } else if (obj.event === 'batchRemoveEvent') {
                    layer.confirm('确定要删除', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: "del/" + obj.data.id,
                            dataType: 'json',
                            type: 'post',
                            success: function(result) {
                                layer.close(loading);
                                if (result.code === 1) {
                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        treetable.render(param);
                                        // table.reload('theTable');
                                    });
                                } else {
                                    layer.msg(result.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    });
                }
            });

        })
    </script>
</body>
</html>